<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Libmanage</title>
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<link href="assets/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
<link href="assets/css/custom-styles.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans'
	rel='stylesheet' type='text/css' />
<link href="assets/js/dataTables/dataTables.bootstrap.css"
	rel="stylesheet" />
</head>
<!--下面继承，使用4个超链接，ajax局部刷新-->
<body>
	<div id="wrapper">
		<nav class="navbar-default navbar-side" role="navigation">
			<div class="sidebar-collapse">
				<ul class="nav" id="main-menu">

					<li><a class="active-menu" href="Lib_libmanage.html"><i
							class="fa fa-book"></i> LibManage</a></li>
					<li><a href="Lib_pcmanage.html"><i class="fa fa-desktop"></i>ComputetManage</a>
					</li>
					<li><a href="Lib_stumanage.html"><i class="fa fa-users"></i>
							MemberManage</a></li>
				</ul>
			</div>
			<!--
                  	作者：annz
                  	时间：2018-06-13
                  	描述：对应的4个实验室要管理的部分
                  -->

		</nav>
		<div id="page-wrapper">
			<div id="page-inner">
				<div class="row">
					<div class="col-md-12">
						<h1 class="page-header">
							<span id="libname">Choose a Lib</span> <small>Pay
								attention to personnel management at any time before each
								operation</small>
						</h1>
					</div>
				</div>

				<div class="row">
					<div class="col-md-3 col-sm-12 col-xs-12">
						<div
							class="panel panel-primary text-center no-boder bg-color-green">
							<div class="panel-body">
								<i class="fa fa-desktop fa-5x"></i>
								<h3>Lib-001</h3>
							</div>
							<div class="panel-footer back-footer-green" onclick="choose(1)">Choose</div>
						</div>
					</div>
					<div class="col-md-3 col-sm-12 col-xs-12">
						<div
							class="panel panel-primary text-center no-boder bg-color-blue">
							<div class="panel-body">
								<i class="fa fa-desktop fa-5x"></i>
								<h3>Lib-002</h3>
							</div>
							<div class="panel-footer back-footer-blue" onclick="choose(2)">Choose</div>
						</div>
					</div>
					<div class="col-md-3 col-sm-12 col-xs-12">
						<div class="panel panel-primary text-center no-boder bg-color-red">
							<div class="panel-body">
								<i class="fa fa-desktop fa-5x"></i>
								<h3>Lib-003</h3>
							</div>
							<div class="panel-footer back-footer-red" onclick="choose(3)">Choose</div>
						</div>
					</div>
					<div class="col-md-3 col-sm-12 col-xs-12">
						<div
							class="panel panel-primary text-center no-boder bg-color-brown">
							<div class="panel-body">
								<i class="fa fa-desktop fa-5x"></i>
								<h3>Lib-004</h3>
							</div>
							<div class="panel-footer back-footer-brown" onclick="choose(4)">Choose</div>
						</div>
					</div>
				</div>

				<div class="panel panel-default">
					<div class="panel-heading">The info of Lib:</div>
					<div class="panel-body">
						<div class="panel-group" id="accordion">
							<div class="panel panel-default">
								<div class="panel-heading">
									<h4 class="panel-title">
										<a data-toggle="collapse" data-parent="#accordion"
											href="#collapseOne" class="collapsed">MainInfo</a>
									</h4>
								</div>
								<div id="collapseOne" class="panel-collapse collapse"
									style="height: 0px;">
									<span id="info"></span><br>
									<h4>LibCreattime：</h4>
									<span class="alert-success" id="creattime"></span> <br>
									<h4>LibTeacher：</h4>
									<span class="alert-warning" id="teacherinfo"></span><br>
									<h4>LibLocation：</h4>
									<span class="alert-danger" id="numberinfo"></span>
								</div>
							</div>
							<div class="panel panel-default">
								<div class="panel-heading">
									<h4 class="panel-title">
										<a data-toggle="collapse" data-parent="#accordion"
											href="#collapseTwo" class="collapsed">LibMember</a>
										<!--实验室人员-->
									</h4>
								</div>
								<div id="collapseTwo" class="panel-collapse collapse"
									style="height: 0px;">
									<div class="col-md-6">
										<div class="panel panel-default">
											<div class="panel-body">
												<div class="table-responsive">
													<table
														class="table table-striped table-bordered table-hover">
														<thead>
															<tr>
																<th>School number</th>
																<th>Name</th>
																<th>Class</th>
																<th>Sex</th>
																<th>Phone</th>
															</tr>
														</thead>
														<tbody id="libmamber">

														</tbody>
													</table>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="panel panel-default">
								<div class="panel-heading">
									<h4 class="panel-title">
										<a data-toggle="collapse" data-parent="#accordion"
											href="#collapseThree" class="collapsed">Event</a>
										<!--增加减少电脑-->
									</h4>
								</div>
								<div id="collapseThree" class="panel-collapse collapse"
									style="height: 0px;">
									<div class="panel panel-default">
										<div class="panel-body">
											<div class="table-responsive">
												<table
													class="table table-striped table-bordered table-hover"
													id="dataTables-example">
													<thead>
														<tr>
															<th>EventContext</th>
															<th>EventInfo</th>
															<th>Process</th>
														</tr>
													</thead>
													<tbody id="eventtb">

													</tbody>
												</table>
											</div>

										</div>
									</div>

								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-4 col-sm-12 col-xs-12">
						<div class="panel panel-default">
							<div class="panel-heading">Laboratory entry and exit
								records</div>
							<div class="panel-body">
								<div class="list-group">
									<table class="table">
										selectDate:
										<input type="date" style="height: 25px" id="datavalue" />
										<button onclick="databtn()" style="height: 25px;">ok</button>
										<thead>
											<tr>
												<th>begin</th>
												<th>over</th>
												<th>name</th>
											</tr>
										</thead>
										<tbody id="usinginfotb">

										</tbody>
									</table>


								</div>
							</div>
						</div>
					</div>
					<div class="col-md-8 col-sm-12 col-xs-12">
						<div class="panel panel-default">
							<div class="panel-heading">ComputerInfo</div>
							<div class="panel-body">
								<div class="table-responsive">
									<table class="table table-striped table-bordered table-hover">
										<thead>
											<tr>
												<th>ComputerID</th>
												<th>ComputerOS</th>
												<th>Location_number</th>
												<th>IP</th>
											</tr>
										</thead>
										<tbody id="pctb">
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>



	<script src="assets/js/jquery-1.10.2.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/jquery.metisMenu.js"></script>
	<script src="assets/js/actions/searchitems.js"></script>
	<script src="assets/js/dataTables/jquery.dataTables.js"></script>
	<script src="assets/js/dataTables/dataTables.bootstrap.js"></script>
	<script src="assets/js/actions/addtext.js"></script>
	<script src="assets/js/custom-scripts.js"></script>
	<script>
		function choose(a) {
			var strs = a;
			var membertb = document.getElementById("libmamber");
			var pctb = document.getElementById("pctb");
			var eventtb = document.getElementById("eventtb");
			var usingtb = document.getElementById("usinginfotb");
			$.ajax({
				url : 'libmanage/Get_libinfo',
				data : {
					"strs" : strs,
				},
				dataType : 'text',
				type : 'POST',
				success : function(jsondata) {
					jsondata = JSON.parse(jsondata).jsondata[0];
					console.log(jsondata);
					addtext("libname", jsondata.Lib_name)
					addtext("creattime", jsondata.Lib_creattime)
					addtext("numberinfo", jsondata.Lib_number)
					addtext("teacherinfo", jsondata.Lib_teacher)
					addtext("info", jsondata.Lib_info)
					$.ajax({
						url : 'libmanage/Fresh_libmanage',
						data : {
							"strs" : strs,
						},
						dataType : 'json',
						type : 'POST',
						success : function(jsondata) {
							jsondata=(jsondata.res);
							console.log(jsondata)
							membertb.innerHTML = "";
							pctb.innerHTML = "";
							eventtb.innerHTML = "";
							usingtb.innerHTML = "";
							creatmembertable(jsondata.memberarray, membertb);
							creatpctable(jsondata.Pcarray, pctb);
							creatacttable(jsondata.actionarray, eventtb);
							creatusingtable(jsondata.usinginfoarray, usingtb);
							initdata();
						}
					})

				}
			})
		}
	</script>
	<script>
		function initdata() {
			$('#dataTables-example').dataTable();
		}
	
	</script>

</body>

</html>